﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/public.css">
    <!--<link rel="stylesheet" href="css/font-awesome-4.5.0/css/font-awesome.min.css" />-->
    <title>任务盯盯</title>
    <style>
        body{
            overflow-x: hidden;
        }
        .containeritem{
            width:90%;
            margin:0 auto;
            position:relative;
            padding:14px 0;
        }
        .contentitem{
            width:100%;
            border:1px solid rgb(46,182,185);
            border-radius:6px;
            margin-bottom:14px;
            overflow:hidden;
            position:relative;
        }
        .item{
            width:33%;
            text-align:center;
            /*border-left:1px solid rgb(46,182,185);*/
            float:left;
            padding:8px 0;
            color:rgb(46,182,185);
        }
        .active{
            color:#ffffff;
        }
        .picbox{
            float:left;
            width:24%;
            min-height: 20px;
        }
        .msgcontent{
            float:left;
            width:76%;
        }
        .pic{
            border-radius:50%;
            width:74%;
            display: block;
            margin:0 auto;
        }
        .person{
            font-size: 16px;
            line-height: 22px;
        }
        .time{
            float:right;
            font-size: 14px;
        }
        .done{
            padding:8px 0;
            font-size:14px;
            color:rgb(140,140,140);
        }
        .objs span{
            font-size: 14px;
            color:rgb(46,182,185);
            display:inline-block;
        }
        .fr{
            float:right;
        }
        .fl{
            float:left;
        }
        .personalmsg{
            padding:8px 0;
            border-bottom:2px solid rgb(230,230,230);
        }


        /*  我发出的  */
        .project{
            padding:4px 0;
            border-bottom: 2px solid rgb(230,230,230);
        }
        .icon{
            color: rgb(46,182,185);
            font-size:22px;
            padding:0 8px;
        }
        .iconnodo{
            color: rgb(150,150,150)
        }
        .jobdelection{
            width:70%;
            float:left;
        }
        .jobtime{
            width:30%;
            float:left;
        }
        .prodoing{
            color: rgb(46,182,185);
            border: 1px solid  rgb(46,182,185);
        }
        .prodone{
            color: rgb(150,150,150);
            border: 1px solid  rgb(150,150,150);
        }
        .pronodo{
            color: rgb(255,150,150);
            border: 1px solid  rgb(255,150,150);
        }
        .box{
            width:4.2em;
            display: block;
            text-align: center;
            font-size: 14px;
            padding:0.2em 0;
            border-radius: 4px;
            margin:0 auto 8px;

        }
        .hadtime{
            font-size:12px;
            color:rgb(200,200,200);
        }
        .proname{
            font-size:16px;
            color:rgb(100,100,100);
        }
        .pronum{
            font-size:13px;
            color:rgb(180,180,180);
        }
        .pername{
            font-size:12px;
            color:rgb(180,180,180);
            line-height: 34px;
            display: inline-block;
        }
        .itemproject{
            width:100%;
            position:absolute;
            background: #fff;
        }
        #bg{
            height:100%;
            position:absolute;
            width:33%;
            background:rgb(46,182,185);
            z-index:-1;
        }
        .arrowing{
            width:32px;
            display: inline-block;
            margin-bottom:-10px;
        }
        .pd{
            line-height: 40px;
        }
        .newpro{
            width:100%;
            position: fixed;
            bottom: 0;
            background: rgb(244,244,244);
            text-align: center;
            color:rgb(46,182,185);
            font-size:22px;
            padding:14px 0;
        }
        .tleheader{
            background: rgb(46,182,185);
        }
        h1{
            color:#fff;
        }
        .w100{
            width: 100%;
        }
        .fs12{
            font-size: 12px;
            color:rgb(180,180,180);
        }
        .pdl{
            padding-left: 4em;
            padding-right: 1.5em;
        }
        .dn{
            display: none;
        }
    </style>
</head>
<body>
    <header class="tleheader">
        <p class="backbtn"><a style="margin:0;">
            <img src="../icon/arrow/zjt.PNG" class="backpic" alt="">
            <span>返回</span></a>
        </p>
        <h1 class="tc" style="color:#fff;">任务盯盯</h1>
        <p class="somebtn">
            <span><a href="xrwfbsz.html">新任务</a></span>
        </p>
    </header>
    <div class="containeritem">
        <div class="contentitem">
            <div class="item active" style="border: none;">盯盯</div>
            <div class="item" style="border-left:1px solid rgb(45,181,185);border-right:1px solid rgb(45,181,185);">我发出的</div>
            <div class="item">我接受的</div>
            <div id="bg"></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>

        <div class="itemproject" style="left:0;">
            <div class="personalmsg">
                <div class="picbox">
                    <img src="../icon/bighead.PNG" class="pic" alt="">
                </div>
                <div class="msgcontent">
                    <p class="person"><span class="name">狄丹阳</span><span class="time">16：59</span></p>
                    <p class="done">xx任务已完成，请确认，谢谢！</p>
                    <p class="objs">
                        <span class="fl">发出任务0个</span>
                        <span class="fr">接受任务15/17个</span>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="personalmsg">
                <div class="picbox">
                    <img src="../icon/bighead.PNG" class="pic" alt="">
                </div>
                <div class="msgcontent">
                    <p class="person"><span class="name">章磊</span><span class="time">16：59</span></p>
                    <p class="done">xx任务已完成，请确认，谢谢！</p>
                    <p class="objs">
                        <span class="fl">发出任务0个</span>
                        <span class="fr">接受任务15/17个</span>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="itemproject" style="left:120%;">
            <a href="wfcdrwbj.html">
                <div class="project">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt=""> <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="prodoing box">进行中</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </a>

            <a href="wfcdrwbj.html">
                <div class="project">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="pronodo box">未完成</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </a>
            <a href="wfcdrwbj.html">
                <div class="project">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span>  <img src="../icon/arrow/sgjths.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="prodone box">已完成</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </a>
        </div>

        <div class="itemproject" style="left:240%;">
                <div class="project click">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="prodoing box">进行中</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
            <a href="wfcerwxq.html">
                    <div class="w100 bt dn">
                        <span class="fs12 pdl">
                            <img src="../icon/xlzsx.png" style="width:8px;">
                            <img src="../icon/jsban.png" style="width:20px;    margin-bottom: -5px;">
                            任务量 1 
                        </span>
                        <span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span>
                    </div>
            </a>
                </div>
                <div class="project click">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="prodoing box">进行中</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
            <a href="wfcerwxq.html">
                    <div class="w100 bt dn">
                        <span class="fs12 pdl">
                            <img src="../icon/xlzsx.png" style="width:8px;">
                            <img src="../icon/jsban.png" style="width:20px;    margin-bottom: -5px;">
                            任务量 1 
                        </span>
                        <span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span>
                    </div>
            </a>
                </div>
                <div class="project click">
                    <div class="jobdelection">
                        <div style="padding-left:15px;">
                            <p><span class="proname">X X 设计</span>  <img src="../icon/jsban.png" class="arrowing"> <span class="pronum">任务量 3</span></p>
                            <p class="pd"><span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span></p>
                        </div>
                    </div>
                    <div class="jobtime">
                        <span class="prodoing box">进行中</span>
                        <span class="hadtime">剩余时间：1天</span>
                    </div>
                    <div class="clear"></div>
            <a href="wfcerwxq.html">
                    <div class="w100 bt dn">
                        <span class="fs12 pdl">
                            <img src="../icon/xlzsx.png" style="width:8px;">
                            <img src="../icon/jsban.png" style="width:20px;    margin-bottom: -5px;">
                            任务量 1 
                        </span>
                        <span class="pername">金磊</span> <img src="../icon/arrow/sgjt.png" class="arrowing" alt="">  <span class="pername">狄丹阳</span>
                    </div>
            </a>
                </div>
        </div>
    </div><a href="xrwfbsz.html">
    <div class="newpro">
        新任务
    </div></a>
<script type="text/javascript" src="../js/back.js"></script>
    <script>
        var item = document.getElementsByClassName("item");
        var itempro = document.getElementsByClassName("itemproject");
        var bg = document.getElementById("bg");
        bg.style.width = 100/3 + "%";
        var itemfunc = new Array();
        var itemprofunc = new Array();
        for(var i = 0; i < item.length; i++){
            itemfunc[i] = function(x){
                item[x].onclick = function(){
                    for(var j = 0; j < item.length; j++){
                        item[j].setAttribute("class","item");
                        item[j].style.color = "rgb(46,182,185)";
                        var k =  j - x*2;
                        itempro[j].style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                        itempro[j].style.webkitTransform = "translateX("+ 120 * k +"%)";
                    }
                    bg.style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                    bg.style.webkitTransform = "translateX("+ 100 * x +"%)";
                    this.style.color = "rgb(255,255,255)";
                }
            }
            itemfunc[i](i)
        }

        var click = document.getElementsByClassName("click");
        var dn = document.getElementsByClassName("dn");
        var func = new Array();
        for(var i = 0; i < click.length; i++ ){
            func[i] = function(x){
                click[x].onclick = function(){
                    for(var j = 0; j < dn.length; j++){
                        dn[j].style.display = "none";
                    }
                    dn[x].style.display = "block";
                }
            }
            func[i](i)
        }
    </script>
</body>
</html>